﻿@using AC.Service.DTO.Blog
@using AC.Util
@model wychuan2.com.Areas.admin.Models.Blog.SectionPublishModel
@{
    ViewBag.Title = "发布段落";
    Layout = "../Shared/_Layout.cshtml";
}

@{
    string strCategories = JsonHelper.ToJson(Model.Categories);
    string strTags = JsonHelper.ToJson(Model.Tags);
    
    var lstFirsts = Model.Categories.Where(c => c.ParentId == 0).ToList();
    var lstSeconds = Model.FirstCategoryIdSelected == 0 
        ? Model.Categories.Where(c => c.ParentId == lstFirsts.First().Id).ToList() 
        : Model.Categories.Where(c => c.ParentId == Model.FirstCategoryIdSelected).ToList();
}

@section styles{
<link rel="stylesheet" href="~/Content/w3bs/patch.css" />
<link rel="stylesheet" href="~/Content/w3bs/docs.min.css" />
<link href="~/Content/plugins/chosen/chosen.css" rel="stylesheet" />
}


<div class="row">
    <div class="col-md-12">
        <div class="ibox">
            <div class="ibox-title">
                <h3>段落发布</h3>
            </div>
            <div class="ibox-content" id="sectionContainer">
                <input type="hidden" id="parentId" value="0" />
                <input type="hidden" id="hidId" value="@Model.CurrentId" />
                <input type="hidden" id="hidContent" value="@Model.CurrentContent" />
                <ul class="nav nav-tabs" role="tablist" id="taglist">
                    <li class="active"><a href="#tab1" data-toggle="tab">发布段落</a></li>
                    <li><a href="#tab2" data-toggle="tab">设置段落锚点</a></li>
                    <li><a href="#tab3" data-toggle="tab">添加子段落</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active m-t-md" id="tab1">
                        <form class="form-horizontal">
                            @*<div class="form-group">
                                <label class="control-label col-sm-1">Parent</label>
                                <div class="col-sm-11">
                                    <p class="form-control-static">@Model.ParentText</p>
                                </div>
                            </div>*@
                            <div class="form-group">
                                <label class="control-label col-sm-1">SectionId</label>
                                <div class="col-sm-11">
                                    <input type="text" name="txtSectionId" value="@Model.SectionId" class="form-control" placeholder="请输入段落ID" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1">标题</label>
                                <div class="col-sm-11">
                                    <input type="text" name="txtTitle" class="form-control" value="@Model.CurrentTitle" placeholder="请输入段落标题" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1">正文</label>
                                <div class="col-sm-11">
                                    <div id="divSummernote"></div>
                                </div>
                            </div>
                            <hr />
                            <div class="form-group">
                                <label class="control-label col-sm-1">分类</label>
                                <div class="col-sm-11">
                                    <div class="input-group">
                                        <select class="form-control" name="selFirstCategory">
                                            @foreach (var first in lstFirsts)
                                            {
                                                <option @(Model.FirstCategoryIdSelected == first.Id ? "selected" : "") value="@first.Id">@first.Name</option>
                                            }
                                        </select>
                                        <span class="input-group-addon">-</span>
                                        <select class="form-control" name="selSecondCategory">
                                            @foreach (var second in lstSeconds)
                                            {
                                                <option @(Model.CategoryIdSelected == second.Id ? "selected" : "") value="@second.Id">@second.Name</option>
                                            }
                                        </select>
                                    </div>
                                    <a href="/admin/blog/setting">管理分类</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1">标签</label>

                                <div class="col-sm-9">
                                    <input type="text" id="txtTags" value="@Model.TagText" name="txtTags" class="form-control" placeholder="输入tab标签，多个之间用,号分隔，最多5个" />
                                    <a href="#modalTags" data-toggle="modal" class="">插入已有标签</a><span class="help-block m-b-none text-info">tab标签，多个之间用,号分隔，最多5个</span>
                                </div>
                            </div>
                            <input type="hidden" id="hidCategoryId" value="@Model.CategoryIdSelected" />
                            <hr />
                            <div class="text-center">
                                <button type="button" id="btnSave" class="btn btn-primary btn-lg">保存</button>
                                <a href="/admin/section/list" id="btnPreview" class="btn btn-white btn-lg">返回列表</a>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane m-t-md" id="tab2">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-sm-12 text-right">
                                <a class="btn btn-primary" data-type="1" data-toggle="modal" href="#modalAnchors">添加</a>
                            </div>
                        </div>
                        <div id="sectionAnchorsContainer">
                            @Html.Partial("_SectionAnchorsList",Model)
                        </div>
                    </div>
                    <div class="tab-pane m-t-md" id="tab3">
                        <div class="row m-b-sm m-t-sm" id="sectionSearchContainer">
                            <div class="col-lg-12">
                                <div class="col-lg-4">
                                    <div class="input-group">
                                        <select class="form-control" name="selFirstCategoryQ">
                                            <option value="">一级类目</option>
                                            @foreach (var first in lstFirsts)
                                            {
                                                <option value="@first.Id">@first.Name</option>
                                            }
                                        </select>
                                        <span class="input-group-addon">-</span>
                                        <select class="form-control" name="selSecondCategoryQ">
                                            <option value="">二级类目</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <input id="txtSectionIdQ" type="text" class="form-control" placeholder="sectionId模糊查询" />
                                </div>
                                <div class="col-lg-4">
                                    <div class="input-group">
                                        <select id="selTagsQ" data-placeholder="所有Tag" class="chosen-select" multiple>
                                            <option value="">请选择Tag</option>
                                            @foreach (var tag in Model.Tags)
                                            {
                                                <option value="@tag.Id" hassubinfo="true">@tag.TagName</option>
                                            }
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <button id="btnSearchSections" class="btn btn-primary" type="button">查询</button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="ibox">
                                    <div class="ibox-content">
                                        <h3>现有子段落列表</h3>
                                        <form class="form-horizontal">
                                            <div class="form-group">
                                                <button id="btnSaveChilds" class="btn btn-primary btn-block" type="button">保存子段落</button>
                                            </div>
                                        </form>
                                        <hr />
                                        <ul id="sectionsCheckedContainer" class="sortable-list connectList agile-list ui-sortable">
                                            @if (Model.CurrentSection != null && Model.CurrentSection.Childs != null)
                                            {
                                                @Html.Partial("../Blog/_BlogSectionList", Model.CurrentSection.Childs)
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="ibox">
                                    <div class="ibox-content">
                                        <h3>可选随笔段落</h3>
                                        <p class="small"><i class="fa fa-hand-o-up"></i> 拖拽下面段落到左侧列表</p>
                                        
                                        <hr />
                                        <ul id="sectionsUnCheckedContainer" class="sortable-list connectList agile-list ui-sortable">
                                            @Html.Partial("../Blog/_BlogSectionList", new List<Sections>())
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modalTags" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="lblTags">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="lblTags">选择标签</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    单击选择一个标签，再次单击取消选择.
                </div>
                @foreach (var tag in Model.Tags)
                {
                    <button type="button" name="btnTags" tag-id="@tag.Id" class="btn btn-outline btn-default">@tag.TagName</button>
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btnSaveTags" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div id="modalAnchors" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="lblAnchors">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="lblAnchors">锚点编辑</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    为当前段落添加锚点，添加的锚点会做为二级菜单显示在右侧导航栏.
                </div>
                <form class="form-horizontal">
                    <input type="hidden" value="0" name="id" />
                    <div class="form-group">
                        <label class="control-label col-sm-2">id</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="AnchorId" placeholder="input anchor id" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">title</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="AnchorTitle" placeholder="input anchor title" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btnSaveAnchor" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>


@section scripts{
    <link rel="stylesheet" href="~/Content/plugins/summernote/summernote.css" />
    <link rel="stylesheet" href="~/Content/plugins/summernote/summernote-bs3.css" />
    <script type="text/javascript" src="~/Scripts/plugins/summernote/summernote.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/summernote/summernote-zh-CN.js"></script>
<script src="~/Scripts/plugins/chosen/chosen.jquery.js"></script>
    <style type="text/css">
        .note-editor.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1029;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="~/Scripts/extension.js"></script>
    <script type="text/javascript" src="~/Scripts/mvcParamMatch.js"></script>
    <script type="text/javascript">
        window.categories = @Html.Raw(strCategories);
        window.tags = @Html.Raw(strTags);
    </script>
    <script type="text/javascript" src="~/Scripts/blog/section.js"></script>
}